<template>
  <div class="message-card">
    <van-row>
      <van-col span="3">
        <van-image :src="userimage" round height="30px" width="30px"></van-image>
      </van-col>
      <van-col>
        <div>
          <strong>{{username}}</strong>
        </div>
        <div class="date">{{date}}</div>
      </van-col>
    </van-row>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    userimage: {
      type: String,
      default:
        'https://tse1-mm.cn.bing.net/th/id/OIP.WP5k6Zm8aoF0pqLFQ7FcPwHaO0?pid=Api&rs=1'
    },
    username: {
      type: String,
      default: '匿名者'
    },
    date: {
      type: String,
      default: ''
    },
    message: {
      type: String,
      default: ''
    }
  }
}
</script>

<style>
.message-card {
  text-align: left;
  margin: 3px 5px;
  padding: 5px 15px;
  border-radius: 10px;
  background-color: #fff;
}
p {
  text-align: left;
}
.date {
  color: gray;
}
</style>